import React, { useRef, useEffect } from "react";
import "./index.scss";
const App = () => {
  const arr = [1, 2, 3, 4, 5];
  const ul = useRef();
  let num = 0;
  //   ul
  let ulel = null;
  //   li们
  let lis = null;
  //   定位
  useEffect(() => {
    ulel = ul.current;
    lis = ulel.children;
    for (var i = 0; i < lis.length; i++) {
      lis[i].style.left = ulel.offsetWidth * i + "px";
    }
    setInterval(() => {
      if (num < 5 && num >= 0) {
        num = ++num;
        for (var i = 0; i < arr.length; i++) {
          lis[i].style.left =
            ulel.offsetWidth * i - ulel.offsetWidth * num + "px";
        }
      } else {
        num = 0;
        for (var i = 0; i < arr.length; i++) {
          lis[i].style.left =
            ulel.offsetWidth * i - ulel.offsetWidth * num + "px";
        }
      }
    }, 1000);
  }, []);
  const left = () => {
    num = ++num;
    for (var i = 0; i < arr.length; i++) {
      lis[i].style.left = ulel.offsetWidth * i - ulel.offsetWidth * num + "px";
    }
  };
  const right = () => {
    num = --num;
    for (var i = 0; i < arr.length; i++) {
      lis[i].style.left = ulel.offsetWidth * i + ulel.offsetWidth * num + "px";
    }
  };
  return (
    <div className="box">
      <ul ref={ul}>
        {arr.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
      <span className="left" onClick={left}>
        ←
      </span>
      <span className="right" onClick={right}>
        →
      </span>
    </div>
  );
};
export default App;
